<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :inline="true" :model="searchForm">
			<el-form-item label="订单编号">
				<el-input placeholder="订单编号" v-model="searchForm.orderCode"></el-input>
			</el-form-item>
			<el-form-item label="优惠券状态">
				<el-select v-model="searchForm.couponStatus" class="input-width" placeholder="全部" clearable>
					<el-option v-for="item in couponStatusOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</el-form-item>
		</el-form>
		
		<!-- 列表 -->
		<el-table :data="dataList" height="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
			<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
			<el-table-column label="优惠券编号" prop="couponCode" align="center"></el-table-column>
			<el-table-column label="领取人" prop="userNickName" align="center" ></el-table-column>
			<el-table-column label="领取方式" prop="receiveType" align="center" >
				<template slot-scope="scope">
					{{scope.row.receiveType == '1' ? '主动领取':'平台赠送'}}
				</template>
			</el-table-column>
			<el-table-column label="领取时间" prop="assignTime" align="center" ></el-table-column>
			<el-table-column label="优惠券状态" prop="couponStatus" align="center" ></el-table-column>
			<el-table-column label="使用时间" prop="useTime" align="center" width="160">
				<template slot-scope="scope">
					{{scope.row.useTime == 'null' ? 'N/A':'scope.row.useTime'}}
				</template>
			</el-table-column>
			<el-table-column label="订单编号" prop="orderCode" align="center" width="100" fixed="right">
				<template slot-scope="scope">
					{{scope.row.orderCode == 'null' ? 'N/A':'scope.row.orderCode'}}
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div v-show="!loading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageForm.pageNum"
			:page-sizes="pageForm.pageSizeSelect" :page-size="pageForm.pageSize" :total="pageForm.totalData" layout="total, sizes, prev, pager, next, jumper"
			:prev-text="pageForm.prevText" :next-text="pageForm.nextText">
			</el-pagination>
		</div>
		<el-divider></el-divider>
		<div align="center">
			<el-button type="info" @click="back">返回</el-button>
		</div>
	</el-card>
</template>

<script>
	import { findCouponTemplateReceiveRecord} from '@/api/activity/couponTemplate'
	export default {
		name: 'couponTemplate',
		data() {
			return {
				// 默认加载弹出层
				loading: true,
				// 数据列表el-table
				dataList: [],
				// 搜索条件
				searchForm: {
					couponStatus:'',
					orderCode:'',
					templateCode: '',
					pageNum: 1,
					pageSize: 10
				},
				//分页相关
				pageForm: {
					pageSizeSelect: [10, 20, 30, 50], //每页显示个数选择器的选项设置
					totalData: 0, //总条数
					pageSize: 10, //每页显示条目个数
					pageNum: 1, //当前页
					prevText: '上一页', //替代图标显示的上一页文字
					nextText: '下一页' //替代图标显示的下一页文字
				},
				couponStatusOptions: [
					{
						label: '已使用',
						value: 1
					},
					{
						label: '未使用',
						value: 2
					},
				],
			}
		},
		created() {
			this.searchForm.templateCode = this.$route.query.templateCode
			this.getDateList()
		},
		methods: {
			// 方法集合
			getDateList() {
				this.loading = true
				findCouponTemplateReceiveRecord(this.searchForm).then(res => {
					this.dataList = res.data.responseData
					this.pageForm.totalData = parseInt(res.data.total)
				})
				this.loading = false
			},
			handleSearch() {
				this.getDateList();
			},
			handleSizeChange(val) {
				this.searchForm.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.searchForm.pageNum = val
				this.getDateList()
			},
			//返回上级菜单
			back() {
				this.$router.go(-1)
			},

		}
	}
</script>
